<template>
    <view>
        <view class="uni-padding-wrap uni-common-mt">
            <view>
                <video class="video" id="myVideo" :src="item.url" autoplay="true"
                    @error="videoErrorCallback" controls></video>
            </view>
			
			<view class="container article">
				<view class="title">{{item.title}}</view>
				
				<view class="author-info" v-if="(item.avatar && item.avatar != '') || (item.author && item.author != '')">
					<image @click="goUCenter(banner)" v-if="(item.avatar && item.avatar != '')" class="avatar" :src="item.avatar"></image>
					<text @click="goUCenter(banner)" v-if="(item.author && item.author != '')" class="author-name">{{item.author}}</text>
					<text style="float: right;text-align: right;margin-right: 20upx;text-overflow: unset;" class="author-mark">发表于：{{item.postdate}}</text>
				</view>
				<view class="author-info" v-if="(item.avatar && item.avatar != '') || (item.author && item.author != '')">
					<text class="author-mark" style="float: left;text-align: left;">{{item.readCount}}人查看 - {{item.goodCount}}人点赞</text>
				</view>
				
				<view class="desc-session">
				  <text class="title">简介</text>
					<view class="desc-wrapper">
						<text class="desc-content">
							{{item.summary}}
						</text>
					</view>
				</view>
				
				<!-- <view class="directors-casts-session">
					<view class="title">简评(3)</view>
					<view class="common-list">
						<view class="list-item has-img" data-id="1">
							<view class="content">
								<view class="header">
									<text class="comment-title">StarlightRiver</text>
								</view>
								<text class="body">Mahershala說片子里某個根本不會被人注意到的佈景里的某塊石頭或許就是V撿的。他說V在拍攝的時候，一直留心撿很漂亮的石頭，撿到了就拿給導演說：看，把這塊石頭放在背景里會有多好看 說到電影里的部分，他可能增肥了有二三十斤，從來沒見過他有那麼大的肚腩（現在似乎已經減回來了）。今天在看V表演時，大部分的時間，我忘了他是Viggo，他就是那樣一個沒文化又油滑、滿嘴跑火車的司機。 僅僅偶爾偶爾有幾個他不說話、只抽煙的鏡頭，鼻孔一噴白霧，就那麼一瞥，卻還像是十幾年前、《東方的承諾》里那個冷酷無情的殺手。 今天導演說He’s a great person before he’s a great actor. 這麼多年了，還是一直一直都沒變啊。</text>
								<text class="bottom">2018-09-21</text>
							</view>
							<image src="https://img3.doubanio.com/icon/u164854631-2.jpg" class="cover" />
						</view>
						<view class="list-item has-img" data-id="2">
							<view class="content">
								<view class="header">
									<text class="comment-title">陈大希</text>
								</view>
								<text class="body">让人印象最深的片段是他们的车在南部的乡间小路上抛锚，和田里劳作的黑奴对视的那一幕，无声却发出巨响。</text>
								<text class="bottom">2018-09-21</text>
							</view>
							<image src="http://io.bukaa.cn/touxiang-girl.png" class="cover" />
						</view>
						<view class="list-item has-img" data-id="3">
							<view class="content">
								<view class="header">
									<text class="comment-title">Rocrw</text>
								</view>
								<text class="body">绝对是今年tiff我看过的最有意思的一部电影，全场笑声掌声就没停过。节奏欢快，情节有趣又不失深度。V叔扮演的来自Bronx街头的意大利裔司机和Ali扮演的受高等教育的黑人音乐家碰撞出令人惊喜的火花，二人从纽约一路向南巡演，然而越向南种族歧视也越来越严重。导演用一种巧妙的角度向观众展示了当时的不公以及音乐家内心的纠葛。尽管他从小就在不同的重要场合表演，然而最尽兴的一次却是在圣诞前夕的一个黑人小酒吧。他最终选择了为自己发声，不再对歧视屈服。结局温馨感人，着实是一部好电影。</text>
								<text class="bottom">2018-09-21</text>
							</view>
							<image src="http://io.bukaa.cn/touxiang-girl.png" class="cover" />
						</view>
					</view>
				</view> -->
				</view>
        </view>
    </view>
</template>

<script>
	
	export default {
		data() {
			return {
				src: '',
				item:{}
			}
		},
		onReady: function(event) {
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo')
			// #endif
		},
		onLoad(event) {
			try {
				this.item = JSON.parse(decodeURIComponent(event.query));
			} catch (error) {
				this.item = JSON.parse(event.query);
			}
			this.init();
		},
		onNavigationBarButtonTap() {
			var that = this;
			if (this.providerList.length === 0) {
				uni.showModal({
					title: '当前环境无分享渠道!',
					showCancel: false
				});
				return;
			}
			let itemList = this.providerList.map(function(value) {
				return value.name;
			})
			var summary = that.item.summary.length > 50 ? that.item.summary.substring(0, 50) + "..." : that.item.summary;
			var data = JSON.parse(JSON.stringify(that.item));
			data.summary = summary;
			uni.showActionSheet({
				itemList: itemList,
				success: (res) => {
					uni.share({
						provider: this.providerList[res.tapIndex].id,
						scene: this.providerList[res.tapIndex].type && this.providerList[res.tapIndex].type === 'WXSenceTimeline' ?
							'WXSenceTimeline' : "WXSceneSession",
						type: 2,
						title: '【涨知识】' + data.title,
						summary: data.summary,
						imageUrl: data.pic,
						href: "https://m.bukaa.cn/#/pages/hot-v/detail?query=" + encodeURIComponent(JSON.stringify(data)),
						success: (res) => {
							console.log("success:" + JSON.stringify(res));
						},
						fail: (e) => {
						}
					});
				}
			})
		},
		methods: {
			init(){
				uni.getProvider({
					service: 'share',
					success: (e) => {
						console.log(JSON.stringify(e.provider));
						let data = []
						for (let i = 0; i < e.provider.length; i++) {
							switch (e.provider[i]) {
								case 'weixin':
									data.push({
										name: '分享到微信好友',
										id: 'weixin',
										sort:0
									})
									data.push({
										name: '分享到微信朋友圈',
										id: 'weixin',
										type:'WXSenceTimeline',
										sort:1
									})
									break;
								case 'sinaweibo':
									data.push({
										name: '分享到新浪微博',
										id: 'sinaweibo',
										sort:2
									})
									break;
								case 'qq':
									data.push({
										name: '分享到QQ',
										id: 'qq',
										sort:3
									})
									break;
								default:
									break;
							}
						} 
						this.providerList = data.sort((x,y) => {
							return x.sort - y.sort
						});
					},
					fail: (e) => {
						console.log('获取分享通道失败', e);
					}
				});
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: '视频加载出错，请稍后重试。。。',
					showCancel: true
				})
			},
		}
	}
</script>

<style>
	
	.video{
		width: 100%;
	}
	
	.container {
	  background: #fff;
	  padding-bottom: 0rpx;
      margin: 5upx 20upx;
	}
	
	.title {
	  color: #000;
	  font-size: 30upx;
	  line-height: 40upx;
	  margin-top: 5upx;
	  margin-bottom: 5upx;
	}
	
	.article .title {
	  padding-bottom: 40rpx;
	  font-size: 40rpx;
	  font-weight: bold;
	}
	
	.article .author-info {
	  overflow: hidden;
	  height: 70upx;
	  line-height: 70upx;
	  font-size: 35rpx;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	  margin-left: 10upx;
	}
	
	.article .author-info .avatar {
	  float: left;
	  width: 70upx;
	  height: 70upx;
	  border-radius: 50%;
	  line-height: 70upx;
	}
	
	.article .author-info .author-mark {
	  line-height: 70upx;
	  color: #6a6a6a;
	}
	
	.author-mark {
	  position: relative;
	  bottom: 0px;
	  padding: 0px;
	  margin: 0px;
	  font-size: 10px;
	  height: 60rpx;
	  overflow: hidden; /*自动隐藏文字*/
	  text-overflow: ellipsis; /*文字隐藏后添加省略号*/
	  white-space: nowrap; /*强制不换行*/
	  color: #69f;
	  width: 300rpx;
	}
	
	.article .author-info text {
	  display: block;
	  float: left;
	  padding-left: 10upx;
	  line-height: 70upx;
	}	
	

	.session-poster {
	  display: flex;
	  align-items: center;
	  width: 100%;
	  background: #e9e9e9;
	}

	.session-poster-spacing {
	  padding-top: 30rpx;
	  padding-bottom: 40rpx;
	}

	.session-poster .poster {
	  display: inline-block;
	  margin: 0rpx auto;
	  text-align: center;
	  width: 300rpx;
	  height: 440rpx;
	}

	.summary-session {
	  display: flex;
	  flex-direction: row;
	  height: 185rpx;
	  align-items: center;
	}

	.movie-summary {
	  display: flex;
	  flex-direction: column;
	  margin: 30rpx 0rpx 30rpx 30rpx;
	}

	.movie-summary .name {
	  width: 100%;
	  color: #4a4a4a;
	  font-size: 42rpx;
	  font-weight: 700;
	  line-height: 1.6;
	  word-break: keep-all;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	  overflow: hidden;
	}

	.movie-summary .subtype, .origin-name, .countries {
	  font-size: 24rpx;
	  color: #9e9e9e;
	}

	.movie-rating {
	  width: 120rpx;
	  height: 120rpx;
	  border: 1px solid #9e9e9e;
	  box-shadow: 4rpx 4rpx 2rpx #e6e6e6;
	  border-radius: 6rpx;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  text-align: center;
	  margin-left:30rpx;
	}

	.movie-rating .average {
	  font-size: 36rpx;
	  font-weight: 700;
	}

	.movie-rating .rating {
	  display: flex;
	  flex-direction: row;
	  position: inherit;
	  margin-top: 0rpx;
	  margin-bottom: 0rpx;
	  align-self: center;
	}

	.movie-rating .rating-star {
	  content: "";
	  display: inline-block;
	  width: 55px;
	  height: 11px;
	  position: inherit;
	  background-repeat: no-repeat;
	  background-image: url();
	}

	.movie-rating .ratings_count {
	  font-size: 20rpx;
	}

	.wish-do-session {
	  display: flex;
	  align-self: center;
	  flex-direction: row;
	  padding-left: 30rpx;
	  padding-right: 30rpx;
	}

	.wish-do-session  .wish-btn {
	  font-size: 28rpx;
	  color: #de9703;
	  padding: 10rpx 70rpx 10rpx 70rpx;
	  margin-right: 80rpx;
	  text-align: center;
	  border-radius: 6rpx;
	  border: 1px solid #de9703;
	  box-sizing: border-box;
	}

	.wish-do-session .do-btn {
	  font-size: 28rpx;
	  color: #de9703;
	  padding: 10rpx 70rpx 10rpx 70rpx;
	  margin-left: 80rpx;
	  text-align: center;
	  border-radius: 6rpx;
	  border: 1px solid #de9703;
	  box-sizing: border-box;
	}

	.desc-session, .directors-casts-session {
	  display: flex;
	  flex-direction: column;
		margin-top: 20upx;
	}

	.desc-session .title, .directors-casts-session .title {
	  color: #9e9e9e;
	  font-size: 28rpx;
	  line-height: 0;
	  margin-bottom: 5rpx;
	}

	.desc-wrapper {
	  display: inline-block;
	}

	.desc-session .desc-content {
	  font-size: 32rpx;
	  color: #4a4a4a;
	  line-height: 38rpx;
	  text-indent: 2em;
	  text-overflow: ellipsis;
	  overflow: hidden;
	  display: block;
	}

	.desc-session .desc-content-auto {
	  height: auto;
	}

	.desc-session .desc-content-3line {
	  height: 114rpx;
	}

	.desc-session .extension {
	  background: #fff;
	  height: 38rpx;
	  font-size: 24rpx;
	  line-height: 38rpx;
	  color: #32cd32;
	}

	.directors-casts-scroll {
	  width: 100%;
	  white-space: nowrap;
	}

	.directors-casts-wrapper {
	  display: inline-block;
	}

	.directors-casts-content {
	  display: flex;
	  flex-direction: column;
	  text-align: center;
	}

	.directors-casts-wrapper .image {
	  width: 140rpx;
	  height: 200rpx;
	  margin-left: 12rpx;
	  margin-right: 12rpx;
	}

	.directors-casts-wrapper .image:first-child {
	  margin-left: 0rpx;
	}

	.directors-casts-wrapper .image:last-child {
	  margin-right: 0rpx;
	}

	.directors-casts-wrapper .video {
	  width: 355rpx;
	  height: 200rpx;
	  margin-left: 12rpx;
	  margin-right: 12rpx;
	}

	.directors-casts-wrapper .video:first-child {
	  margin-left: 0rpx;
	}

	.directors-casts-wrapper .video:last-child {
	  margin-right: 0rpx;
	}

	.directors-casts-wrapper .name {
	  color: #4a4a4a;
	  font-size: 22rpx;
	  word-break: keep-all;
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;
	}

	.remind-box {
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  padding-bottom: 300rpx;
	}
	.remind-img {
	  width: 250rpx;
	  height: 250rpx;
	  padding-bottom: 25rpx;
	}
	.remind-text {
	  font-size: 12pt;
	  line-height: 150%;
	}
	.remind-btn {
	  margin-top: 20rpx;
	  font-size: 9pt;
	  padding: 5rpx 20rpx;
	  text-align: center;
	  background-color: #7acfa6;
	  border-radius: 3px; 
	  border-bottom: 2px solid #4fc08d;
	  color: #fff;
	}


	.common-list .header {
	  position: relative;
	}

	.common-list .header .vote {
	  position: absolute;
	  top: 0;
	  right: 0;
	  width: 40rpx;
	  height: 40rpx;
	}

	.common-list .body {
	  display: block;
	  margin-top: 5rpx;
	  color: #333;
	  text-align: justify;
	  line-height: 32upx;
	  font-size: 25upx;
	}

	.common-list .bottom {
	  display: block;
	  margin-top: 10rpx;
	  font-size: 20rpx;
	  color: #ccc;
	}

	.common-list .list-item {
	  position: relative;
	  border-bottom: 1px solid #eee;
	  padding-top: 10rpx;
	  padding-left: 20rpx;
	  padding-right: 20rpx;
	  min-height: 50rpx;
	  overflow: hidden;
	}

	.common-list .list-item:first-child {
	  border-top: 1px solid #eee;
	}

	.common-list .list-item:last-child {
	  border-bottom: none;
	}

	.common-list .list-item:active {
	  background: #fafafa;
	}

	.common-list .list-item.has-img image.cover {
	  position: absolute;
	  left: 00rpx;
	  top: 10rpx;
	  width: 70rpx;
	  height: 70rpx;
	  border-radius: 50%;
	}

	.common-list .list-item.has-img .content {
	  margin-left: 70rpx;
	}

	.common-list .list-spliter {
	  font-size: 24rpx;
	  line-height:38rpx;
	  text-overflow:ellipsis;
	  overflow:hidden;
	  background: #eee;
	  padding: 20rpx;
	  color: #4a4a4a;
	}

	.comment-title {
	  font-size: 26rpx;
	  line-height: 35rpx;
	  margin-bottom: 5rpx;
	}

	.comment-title-signature {
	  color: #9e9e9e;
	  font-size: 24rpx;
	  line-height: 35rpx;
	  margin-bottom: 5rpx;
	}

</style>
